﻿import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FilUI

import "../controls"

FilScrollablePage {
    id: root

    property int rightScrollableMargin: 17
    property int frameSpacing: 12
    property int footerHeight: 8
    property var colorData: [
        FilColors.Yellow,
        FilColors.Orange,
        FilColors.Red,
        FilColors.Magenta,
        FilColors.Purple,
        FilColors.Blue,
        FilColors.Teal,
        FilColors.Green
    ]

    FilFrame {
        Layout.fillWidth: true
        Layout.rightMargin: root.rightScrollableMargin
        padding: 10
        color: "transparent"
        ColumnLayout {
            FilText {
                text: qsTr("Theme colors")
                font: FilTextStyle.BodyStrong
                // Layout.bottomMargin: 4
            }
            RowLayout {
                Repeater {
                    model: root.colorData
                    delegate: Rectangle {
                        width: 28 //42
                        height: 28 //42
                        radius: 4
                        color: mouse_item.containsMouse ? Qt.lighter(modelData.normal, 1.1) : modelData.normal
                        border.color: modelData.darker
                        FilIcon {
                            anchors.centerIn: parent
                            iconSource: FilIcons.AcceptMedium
                            iconSize: 15
                            visible: modelData === FilTheme.accentColor
                            color: Qt.rgba(1, 1, 1, 1)
                        }
                        MouseArea {
                            id: mouse_item
                            anchors.fill: parent
                            hoverEnabled: true
                            onClicked: FilTheme.accentColor = modelData
                        }
                    }
                }
            }
            Row {
                spacing: 10
                FilText {
                    text: qsTr("Customize the Theme Color")
                    anchors.verticalCenter: parent.verticalCenter
                }
                FilColorPicker {
                    id: color_picker
                    width: 30
                    height: 30
                    current: FilTheme.accentColor.normal
                    onAccepted: {
                        FilTheme.accentColor = FilColors.createAccentColor(current)
                    }
                    FilIcon {
                        anchors.centerIn: parent
                        iconSource: FilIcons.AcceptMedium
                        iconSize: 15
                        visible: {
                            for (var i = 0; i < root.colorData.length; i++) {
                                if (root.colorData[i] === FilTheme.accentColor) {
                                    return false
                                }
                            }
                            return true
                        }
                        color: Qt.rgba(1, 1, 1, 1)
                    }
                }
            }
        }
    }

    FilFrame {
        Layout.fillWidth: true
        Layout.rightMargin: root.rightScrollableMargin
        padding: 10
        color: "transparent"
        ColumnLayout {
            FilText {
                text: "Native Text"
                font: FilTextStyle.BodyStrong
            }
            FilToggleSwitch {
                checked: FilTheme.nativeText
                onClicked: {
                    FilTheme.nativeText = !FilTheme.nativeText
                }
            }
        }
    }

    FilFrame {
        Layout.fillWidth: true
        Layout.rightMargin: root.rightScrollableMargin
        padding: 10
        color: "transparent"
        ColumnLayout {
            FilText {
                text: qsTr("Open Animation")
                font: FilTextStyle.BodyStrong
            }
            FilToggleSwitch {
                checked: FilTheme.animationEnabled
                onClicked: {
                    FilTheme.animationEnabled = !FilTheme.animationEnabled
                }
            }
        }
    }

    FilFrame {
        Layout.fillWidth: true
        Layout.rightMargin: root.rightScrollableMargin
        padding: 10
        color: "transparent"
        ColumnLayout {
            FilText {
                text: qsTr("Open Blur Window")
                font: FilTextStyle.BodyStrong
            }
            FilToggleSwitch {
                id: toggle_blur
                checked: FilTheme.blurBehindWindowEnabled
                onClicked: {
                    FilTheme.blurBehindWindowEnabled = !FilTheme.blurBehindWindowEnabled
                }
            }
            FilText {
                visible: FilTheme.blurBehindWindowEnabled || window.effect === qsTr("dwm-blur")
                text: qsTr("Window tintOpacity")
            }
            FilSlider {
                id: id_filslider__tint_opacity
                visible: FilTheme.blurBehindWindowEnabled || window.effect === qsTr("dwm-blur")
                to: 1
                stepSize: 0.1
                onValueChanged: {
                    window.tintOpacity = value
                }
                Component.onCompleted: {
                    // value = window.tintOpacity
                    value = SettingsHelper.getWindowOpacity(window.tintOpacity)
                }
                // 默认slider会出现0.7000000000000001这样的值，因此针对浮点精度做特殊处理
                tooltipEnabled: false
                FilToolTip {
                    parent: id_filslider__tint_opacity.handle
                    visible: id_filslider__tint_opacity.pressed ||
                             id_filslider__tint_opacity.hovered
                    text: String(Number(id_filslider__tint_opacity.value.toFixed(1)))
                }
            }
            FilText {
                visible: FilTheme.blurBehindWindowEnabled
                text: qsTr("Window blurRadius")
            }
            FilSlider {
                visible: FilTheme.blurBehindWindowEnabled
                to: 100
                stepSize: 1
                onValueChanged: {
                    window.blurRadius = value
                }
                Component.onCompleted: {
                    // value = window.blurRadius
                    value = SettingsHelper.getWindowBlurRadius(window.blurRadius)
                }
            }
        }
    }

    FilFrame {
        Layout.fillWidth: true
        Layout.rightMargin: root.rightScrollableMargin
        padding: 10
        color: "transparent"
        ColumnLayout {
            FilText {
                text: qsTr("Window Effect")
                font: FilTextStyle.BodyStrong
            }
            Row {
                spacing: 10
                Repeater {
                    model: window.availableEffects
                    delegate: FilRadioButton {
                        checked: window.effect === modelData
                        text: qsTr(`${modelData}`)
                        clickListener: function() {
                            window.effect = modelData
                            SettingsHelper.saveWindowEffect(modelData)
                            if (window.effective) {
                                FilTheme.blurBehindWindowEnabled = false
                                toggle_blur.checked = Qt.binding( function() {
                                    return FilTheme.blurBehindWindowEnabled
                                })
                            }
                        }
                    }
                }
            }
        }
        Component.onCompleted: {
            window.effect = SettingsHelper.getWindowEffect()
        }
    }
}
